<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>充值分析</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<!--<link rel="shortcut icon" href="favicon.ico"> <link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/new_file.css" rel="stylesheet">-->
	<link rel="shortcut icon" href="favicon.ico"> <link href="__STATIC__/css/bootstrap.min.css" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/new_file.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox ">
				<div class="ibox-title">
					<h5>充值分析</h5>
				</div>
				<div class="toogl_body">
					<div class="ibox-content ibox-jqGrid">
						<p>选择时间段：<input type="text" id="time" class="input-ys" readonly="readonly">
							<input type="button" value="確定" class="input-anniu" id="bt">
						</p>
						<div id="box" style="width: 100%; height:500px; background-color: white;"></div><br/>
						<div class="jqGrid_wrapper">
						<table id="table_list_1"></table>
						<div id="pager_list_1"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--手机导航-->
<div class="to-fdh" style="display: none;">
	<img class="to-imgd" src="__STATIC__/img/phonedh.jpg">
	<div class="mob-nrlb">
		<ul>
			<li>
				<a class="mob-nrdh">管理</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('Player/gameplayer')}">玩家管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('system/notice')}">公告管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('email/mail')}">邮件管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Club/club')}">亲友圈管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Money/money')}">提现管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Order/order')}">订单管理</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh">数据</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('data/datagk')}">概況</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datawf')}">玩法</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datalc')}">留存</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datass')}">实时数据</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataczfx')}">充值分析</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataclub')}">亲友圈统计</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/president')}">高级会长</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/regionaldata')}">地区数据</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh mob-qbh">权限</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_list')}">权限管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_group')}">用户组管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('account/account_details')}">后台账号管理</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<div id="zkbg">
	<img src="__STATIC__/img/dp.gif">
</div>
<div class="vnl-zz" style="display:none">
	<div><img src="__STATIC__/img/bqhp.gif"></div>
</div>
<!--手机适配-->
<script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__STATIC__/js/plugins/peity/jquery.peity.min.js"></script>
<script src="__STATIC__/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__STATIC__/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script src="__STATIC__/js/content.js?v=1.0.0"></script>
<script src="__STATIC__/js/plugins/laydate/laydate.js"></script>
<script src="__STATIC__/js/echarts.min.js"></script>
<script src="__STATIC__/js/echarts.common.min.js"></script>
<script>
    //手机适配
    $(function(){
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            $("head").append("<link>");
            var css = $("head").children(":last");
            css.attr({
                rel:  "stylesheet",
                type: "text/css",
                href: "__STATIC__/css/phone_sp.css"
            });
            var mql = window.matchMedia("(orientation: portrait)");
            if(mql.matches) { //竖屏样式
                $(".vnl-zz").show();
                $(".to-fdh").hide();
            }else{
                $(".to-fdh").show();
                $("html").width("100%");
                $("body").width("100%");
            }
            mql.addListener(function(m) {
                if(m.matches) {
                    // 改变到直立方向
                    $(".vnl-zz").show();
                    $(".to-fdh").hide();
                }
                else {
                    $(".to-fdh").show();
                    $(".vnl-zz").hide();
                    $("html").width("100%");
                    $("body").width("100%");
                }
            });
        }
    });
    //导航显示展开
    $(".mob-nrdh").click(function(){
        $(this).next().toggle(".mob-nryc");
    });
    $(".to-imgd").click(function(){
        $(this).next().toggle(".mob-nrlb");
    });
    //手机适配end
    var mydata = [];

    $("#bt").on('click', function() {

        var time = $("#time").val();
        if(time == ""){
            alert("请选择日期");
            return false;
        }
        var start_time = time.substring(0,10)+" "+"00:00:00";
        var end_time = time.substring(13)+" "+"23:59:59";
        $.ajax({
            url: '__URL__/Charge',
            data: {
                "start_time": start_time, //开始日期
                "end_time":end_time // 结束日期
            },
            dataType: "json",
            type: "post",
            success: function(e) {
                $("#table_list_1").jqGrid("clearGridData");
                for (i  in e.Charge) {
                    // console.log(e.Charge[i].datetime);
                    mydata = {
                        datetime: e.Charge[i].datetime, //时间
                        recharge_total_user: e.Charge[i].recharge_total_user, //充值用户总数
                        recharge_total_amount: e.Charge[i].recharge_total_amount,//充值总金额
                        recharge_gold_user: e.Charge[i].recharge_gold_user,//充蓝钻用户数
                        recharge_gold_amount: e.Charge[i].recharge_gold_amount,//充蓝钻金额
                        recharge_diamond_user: e.Charge[i].recharge_diamond_user,//充黄钻会长数
                        recharge_diamond_amount: e.Charge[i].recharge_diamond_amount,//充黄钻金额
                        recharge_user_card_user: e.Charge[i].recharge_user_card_user,//用户购卡用户数
                        recharge_user_card_amount: e.Charge[i].recharge_user_card_amount,//用户购卡金额
                        recharge_club_card_user: e.Charge[i].recharge_club_card_user,//会长购卡会长数
                        recharge_club_card_amount: e.Charge[i].recharge_club_card_amount,//会长购卡金额
                    };
                    $("#table_list_1").addRowData(i, mydata, "last");
                }
                var data = [];
                for (i  in e.amount_Charge) {
                    data.push(e.amount_Charge[i].recharge_gold_amount);
                    data.push(e.amount_Charge[i].recharge_diamond_amount);
                    data.push(e.amount_Charge[i].recharge_user_card_amount);
                    data.push(e.amount_Charge[i].recharge_club_card_amount);
				  }
                console.log(data);
                var myChart = echarts.init(document.getElementById("box"));
                        var option = {
                            title : {
                                text: '数据统计',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['充蓝钻金额','充黄钻金额','用户购卡金额','会长购卡金额']
                            },
                            series : [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:data,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        // option 里面的内容基本涵盖你要画的图表的所有内容
                        // 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
            // }
        })

    })
    $(document).ready(function () {
        // 获取到这个DOM节点，然后初始化
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $("#table_list_1").jqGrid({
            data: mydata,
            datatype: "local",
            height: 250,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [20,50,100],
            colNames: ['日期', '充值人数', '充值金额','购黄钻人数', '购黄钻金额',  '购蓝钻人数','购蓝钻金额', '用户购卡人数','用户购卡金额','会长购卡人数', '会长购卡金额'],
            colModel: [
                {
                    name: 'datetime',
                    index: 'datetime',
                    width: 60,
                    sorttype: "int",
                    align:"center"
                },
                {
                    name: 'recharge_total_user',
                    index: 'recharge_total_user',
                    width: 90,
                    align:"center"
                },
                {
                    name: 'recharge_total_amount',
                    index: 'recharge_total_amount',
                    width: 100,
                    align:"center"
                },
                {
                    name: 'recharge_diamond_user',
                    index: 'recharge_diamond_user',
                    width: 80,
                    align:"center"
                },
                {
                    name: 'recharge_diamond_amount',
                    index: 'recharge_diamond_amount',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'recharge_gold_user',
                    index: 'recharge_gold_user',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'recharge_gold_amount',
                    index: 'recharge_gold_amount',
                    width: 150,
                    sortable: false,
                    align:"center"
                },
                {
                    name: 'recharge_user_card_user',
                    index: 'recharge_user_card_user',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'recharge_user_card_amount',
                    index: 'recharge_user_card_amount',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'recharge_club_card_user',
                    index: 'recharge_club_card_user',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },

                {
                    name: 'recharge_club_card_amount',
                    index: 'recharge_club_card_amount',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                }
            ],
            pager: "#pager_list_1",
            viewrecords: true,
            caption: "概况",
            hidegrid: false
        });

        
		setTimeout(function(){
            var width = $('.jqGrid_wrapper').width();
            $('#table_list_1').setGridWidth(width);
		},500);
        
        
    });
    laydate.render({
        elem: '#time',
        range: true
    });
</script>
</body>

</html>